<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>管理员登陆</title>
	<link rel="stylesheet" th:href="@{/plug/element-ui/theme-chalk/index.css}" />
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<script th:src="@{/plug/vue/vue.js}"></script>
	<script th:src="@{/plug/axios/axios.min.js}"></script>
	<script th:src="@{/plug/axios/request.js}"></script>
	<script th:src="@{/plug/element-ui/index.js}"></script>
	<script th:src="@{/js/index.js}"></script>
	<style scoped lang="less">
		.loginbody {
			width: 100%;
			height: 100%;
			min-width: 1000px;
			background-color: #2d3a4b;
			background-size: 100% 100%;
			background-position: center center;
			overflow: auto;
			background-repeat: no-repeat;
			position: fixed;
			line-height: 100%;
			padding-top: 150px;
			margin: -8px;
		}

		.logintext {
			margin-bottom: 20px;
			line-height: 50px;
			text-align: center;
			font-size: 30px;
			font-weight: bolder;
			color: white;
			text-shadow: 2px 2px 4px #000000;
		}

		.logindata {
			width: 400px;
			height: 300px;
			transform: translate(-50%);
			margin-left: 50%;
		}

		.tool {
			display: flex;
			justify-content: space-between;
			color: #606266;
		}

		.butt {
			margin-top: 10px;
			text-align: center;
		}

		.shou {
			cursor: pointer;
			color: #606266;
		}

		.title-wrap {
			filter: contrast(30);

			@keyframes showup {
				0% {
					letter-spacing: -20px;
				}

				100% {
					letter-spacing: 4px;
				}
			}
		}

		.title {
			letter-spacing: 4px;
			animation: showup 3s forwards;
		}

		/*ui*/
		/* /deep/ .el-form-item__label {
  font-weight: bolder;
  font-size: 15px;
  text-align: left;
}

/deep/ .el-button {
  width: 100%;
  margin-bottom: 10px;

} */
	</style>
</head>

<body>

	<div id="app">
		<div class="loginbody">
			<div class="logindata">
				<div class="logintext title-wrap">
					<span class="title">
						{{ "管理员登陆" }}
					</span>
				</div>
				<div class="formdata">
					<el-form ref="form" :model="form" :rules="rules">
						<el-form-item prop="user">
							<el-input v-model="form.user" clearable placeholder="请输入账号">
								<template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="form.password" clearable placeholder="请输入密码" show-password>
								<template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
							</el-input>
						</el-form-item>
					</el-form>
				</div>
				<!--<div class="tool">
					<div>
						<el-checkbox v-model="checked" @change="remenber">记住密码</el-checkbox>
					</div>
				</div>-->
				<div class="butt">
					<el-button type="primary" @click.native.prevent="login('form')">登录</el-button>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data() {
				return {
					form: {
						password: "",
						user: "",
					},
					checked: false,
					rules: {
						user: [
							{required: true, message: "请输入用户名", trigger: "blur"},
							{max: 10, message: "不能大于10个字符", trigger: "blur"},
						],
						password: [
							{required: true, message: "请输入密码", trigger: "blur"},
							{max: 10, message: "不能大于10个字符", trigger: "blur"},
						],
					},
				};
			},
			mounted() {
				if (localStorage.getItem("news")) {
					this.form = JSON.parse(localStorage.getItem("news"))
					this.checked = true
				}
			},
			created() {

			},
			methods: {
				login(form) {
					let that = this
					that.$refs[form].validate((valid) => {
						if (valid) {
							postRequst('/admin/logon',that.form, true).then(function (resp) {
								if(resp.status === 0){
									that.$message({message: resp.msg, type: "success"});
									setTimeout(function(){
										if(resp.data){
											location.href = resp.data
										}else{
											location.href = '/admin/info'
										}
									}, 500)
									return 
								}
								that.$message({message: resp.msg, type: "error"});
							})
						} else {
							return false;
						}
					});
				},
				remenber(data) {
					this.checked = data
					if (this.checked) {
						localStorage.setItem("news", JSON.stringify(this.form))
					} else {
						localStorage.removeItem("news")
					}
				}
			}

		})
	</script>
</body>

</html>